<template>
    <div class="customer-page" style="margin-left: 15px; margin-top: 15px;">
        <!-- 搜索条件 -->
        <el-form :inline="true" :model="keyword" label-width="100px">
            <el-form-item label="公告内容">
                <el-input v-model="keyword.content" placeholder="请输入公告内容关键字进行搜索"></el-input>
            </el-form-item>
            <el-form-item style="margin-left: 30px;">
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" icon="el-icon-delete" @click="handleDleteBatch">批量删除</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" plain size="primary" @click="resetSearchForm('searchForm')"
                    icon="el-icon-refresh">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 数据表格 -->
        <el-table :data="tableData" tooltip-effect="dark" class="billing-table"
            @selection-change="handleSelectionChange" width="100%">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column prop="id" label="编号" width="200"></el-table-column>
            <el-table-column prop="content" label="公告内容" width="800"></el-table-column>
            <el-table-column prop="publishDate" label="发布时间" value-format="yyyy-MM-dd" width="300"></el-table-column>
            <el-table-column label="操作" width="250">
                <template #default="scope">
                    <el-button type="primary" size="small" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total" class="pagination">
        </el-pagination>

        <!-- 编辑弹窗 -->
        <el-dialog title="编辑客户" :visible.sync="editDialogVisible" width="50%">
            <el-form ref="editForm" :model="editForm" label-width="100px">
                <el-form-item label="公告内容">
                    <el-input v-model="editForm.content" placeholder="公告内容">
                    </el-input>
                </el-form-item>
                <el-form-item label="发布时间">
                    <el-date-picker v-model="editForm.publishDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="editFormSubmit">确定</el-button>
                    <el-button type="default" @click="editDialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 新增弹窗 -->
        <el-dialog title="编辑客户" :visible.sync="addDialogVisible" width="50%">
            <el-form ref="addForm" :model="addForm" label-width="100px">
                <el-form-item label="公告内容">
                    <el-input v-model="addForm.content" placeholder="公告内容">
                    </el-input>
                </el-form-item>
                <el-form-item label="发布时间">
                    <el-date-picker v-model="addForm.publishDate" type="date" value-format="yyyy-MM-dd" placeholder="发布时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addFormSubmit">确定</el-button>
                    <el-button type="default" @click="addDialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { getContentList, deleteContent,  editContent, addContent, deleteBatch } from '@/api/psm/content'

export default {
    name: 'Clue',
    data() {
        return {
            // 数据表单信息
            tableData: [],
            currentPage: 1,
            pageNum: 1,
            pageSize: 10,
            total: 0,
            // 搜索条件
            keyword: {
                content: ''
            },
            // 批量删除
            ids: [],
            // 编辑弹窗
            editDialogVisible: false,
            editForm: {
                content: '',
                publishDate: ''
            },
            // 新增弹窗
            addDialogVisible: false,
            addForm: {
                content: '',
                publishDate: ''
            },

        }
    },

    created() {
        this.fetchData()
    },

    methods: {
        // 初始化数据
        fetchData() {
            // 传入搜索条件
            let params = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                content: this.keyword.content
            }
            // 获取列表数据
            getContentList(params).then(response => {
                console.log("getContentList, response", response)
                this.tableData = response.data.list
                this.total = response.data.total
            })
        },

        // 删除的选中行
        handleSelectionChange(selectionRowArray) {
            this.ids = [];
            for (let i = 0; i < selectionRowArray.length; i++) {
                this.ids.push(selectionRowArray[i].id)
            }
        },

        // 批量删除
        handleDleteBatch() {
            this.$confirm('确定删除选中的[' + this.ids + ']条客户吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteBatch(this.ids).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.currentPage = 1;
                    this.fetchData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        // 打开编辑弹窗
        handleEdit(index, row) {
            // 传递本行数据给编辑弹窗
            this.editForm = JSON.parse(JSON.stringify(row));
            this.editDialogVisible = true
        },

        // 编辑弹窗提交
        editFormSubmit() {
            console.log("编辑, editForm", this.editForm)
            editContent(this.editForm).then(res => {
                console.log("编辑, res", res)
                this.$message({
                    type: 'success',
                    message: '编辑成功!'
                });
                this.editDialogVisible = false
                this.fetchData()
            }).catch(err => {
                this.$message({
                    type: 'error',
                    message: '编辑失败!'
                })
            })
        },
        // 开启新增弹窗
        handleAdd(index, row) {
            console.log("新增, row", row)
            // 清空表单数据
            this.addForm = {},
                this.addDialogVisible = true;
        },

        // 新增弹窗提交
        addFormSubmit() {
            // 日期，内容不能为空
            if (!this.addForm.publishDate || !this.addForm.content) {
                this.$message({
                    type: 'error',
                    message: '日期和内容不能为空!'
                });
                return;
            }
            addContent(this.addForm).then(res => {
                console.log("新增, res", res)
                this.$message({
                    type: 'success',
                    message: '新增成功!'
                });
                this.addDialogVisible = false
                this.fetchData()
            }).catch(err => {
                this.$message({
                    type: 'error',
                    message: '新增失败!'
                });
            })
        },
        // 页面大小变化
        handleSizeChange(val) {
            this.pageSize = val
            this.fetchData()
        },

        // 页码变化
        handleCurrentChange(val) {
            this.currentPage = val
            this.fetchData()
        },

        // 搜索
        handleSearch() {
            this.fetchData()
        },
        // 删除
        handleDelete(index, row) {
            console.log("准备删除, row.id", row.id);
            this.$confirm('确定删除编号为 ' + row.id + ' 的客户吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteContent(row.id)
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        // 确保重新获取数据
                        this.currentPage = 1;
                        this.fetchData()
                    })
                    .catch(error => {
                        console.error("删除失败", error);
                        this.$message({
                            type: 'error',
                            message: '删除失败, 请重试!'
                        });
                    });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        // 重置
        resetSearchForm() {
            this.keyword = {
                content: ''
            };
            this.currentPage = 1;
            this.fetchData()
        },


    }
}
</script>

<style scoped>
.customer-page {
    margin: 15px 30px;
}

.billing-table {
    width: 100%;
}

.el-table-column {
    text-align: center;
    /* 使表格列内容居中 */
}
</style>